<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul>
    <script>
        // 数组的扩展

        //1. 数组的遍历
        const arr = [10,20,30,40];

        // for循环
        for(let i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }

        // for...in遍历
        for(let i in arr){
            console.log(i, arr[i]);
        }

        // forEach()遍历
        arr.forEach((v,k) => {
            console.log(k,v);
        });

        // for ... of
        for(let v of arr){
            console.log(v);
        }

        // for…of循环的使用实例
        const arr2 = [10,20,30,40];

        // for... of 遍历所有值
        for(let v of arr){
            console.log(v);
        }

        // for... of 遍历没有元素的下标和值
        // for(let v of arr.entries()){
        //     console.log(v[0], v[1]);
        // }
        for(let [k, v] of arr.entries()){
            console.log(k, v);
        }
        // [k,v] = [0,10]

        // Array.from()
        // Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
        // 获取上面所有的li节点
        const oblist = document.querySelectorAll("li");
        console.log(oblist); // 返回的是nodeList对象（可迭代的），并不是一个真正的数组
        // 由于oblist不是一个真正的数组，所有数组的方法fliter/some/map...不能使用
        console.log(Array.isArray(oblist)); // false
        // 解决办法：可以使用Array.from()将其转成真正数组
        Array.from(oblist).map(item => { item.className="cc";});

        // Array.of()
        //Array.of()方法用于将一组值转化为数组，即新建数组，而不考虑参数的数量或类型。
        const a4 = Array.of(10,20,30,40); // 将一组值转化为数组
        console.log(a4);

        // 数组实例的 find() 和 findIndex() 
        // 数组实例的 some() 和 every()
        // 数组实例的 fill()

    </script>
</body>
</html>